<%--
  Created by IntelliJ IDEA.
  User: 沐硕
  Date: 2024/6/22
  Time: 9:16
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>

<head>
    <title>在线商城系统</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="author" content="">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="../Front/style.css">
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/Swiper/9.4.1/swiper-bundle.min.css" />
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500&family=Lato:wght@300;400;700&display=swap"
          rel="stylesheet">
    <!-- script
      ================================================== -->
    <script src="js/modernizr.js"></script>
</head>

<body>
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
    <jsp:include page="symol.jsp" />
</svg>

<!--搜索框-->
<div class="search-popup">
    <!-- 搜索弹出框容器 -->
    <jsp:include page="search.jsp" />
</div>
<!--头部-->
<header id="header" class="site-header header-scrolled position-fixed text-black bg-light">
    <!-- 头部开始，具有类名site-header、header-scrolled、position-fixed、text-black和bg-light -->
    <jsp:include page="header.jsp" />
    <!-- 导航条结束 -->
</header>

<%--小标题--%>
<section class="hero-section position-relative bg-light-blue padding-medium">
    <div class="hero-content">
        <div class="container">
            <div class="row">
                <div class="text-center padding-large no-padding-bottom">
                    <h1 class="display-2 text-uppercase text-dark">购物车</h1>
                    <div class="breadcrumbs">
              <span class="item">
                <a href="index.jsp">首页 ></a>
              </span>
                        <span class="item">购物车</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="shopify-cart padding-large">
    <div class="container">
        <div class="row">
            <div class="cart-table">
                <!-- 购物车标题 -->
                <div class="cart-header">
                    <div class="row d-flex text-uppercase">
                        <h3 class="cart-title col-lg-4 pb-3">产品</h3>
                        <h3 class="cart-title col-lg-3 pb-3">品质</h3>
                        <h3 class="cart-title col-lg-4 pb-3">小计</h3>
                    </div>
                </div>
                <!-- 购物车项目 -->
                <c:forEach var="shopping_cart" items="${cartItems}">
                    <div class="cart-item border-top border-bottom padding-small">
                        <div class="row align-items-center">
                            <!-- 产品信息 -->
                            <div class="col-lg-4 col-md-3">
                                <div class="cart-info d-flex flex-wrap align-items-center mb-4">
                                    <!-- 产品图片 -->
                                    <div class="col-lg-5">
                                        <div class="card-image">
                                            <img src="${pageContext.request.contextPath}/${goods_image}" alt="${goods_info}" class="img-fluid">
                                        </div>
                                    </div>
                                    <!-- 产品详情 -->
                                    <div class="col-lg-4">
                                        <div class="card-detail">
                                            <h3 class="card-title text-uppercase">
                                                <a href="#">${goods_info}</a>
                                            </h3>
                                            <div class="card-price">
                                                <span class="money text-primary">￥${goods_price}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- 产品数量和小计 -->
                            <div class="col-lg-6 col-md-7">
                                <div class="row d-flex">
                                    <!-- 数量输入框 -->
                                    <div class="col-lg-6">
                                        <div class="qty-field">
                                            <div class="qty-number d-flex">
                                                <form action="${pageContext.request.contextPath}/CartUpdateServlet.do" method="post" class="d-flex">
                                                    <input type="hidden" name="goods_id" value="${shopping_cart.goods_id}">
                                                    <input class="form-control border-0 shadow-0 p-0 col" name="quantity" type="text" value="${shopping_cart.quantity}" style="text-align: center;">
                                                    <button type="submit" class="btn btn-primary">更新</button>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- 小计价格 -->
                                    <div class="col-lg-4">
                                        <div class="total-price">
                                            <span class="money text-primary">￥${goods_price * quantity}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- 移除项目按钮 -->
                            <div class="col-lg-1 col-md-2">
                                <div class="cart-remove">
                                    <form action="${pageContext.request.contextPath}/CartRemoveServlet.do" method="post">
                                        <input type="hidden" name="goods_id" value="${shopping_cart.goods_id}">
                                        <button type="submit" class="btn btn-danger">移除</button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </c:forEach>
            </div>
            <!-- 购物车总计 -->
            <div class="cart-totals bg-grey padding-medium">
                <h2 class="display-7 text-uppercase text-dark pb-4">购物车总计</h2>
                <div class="total-price pb-5">
                    <table cellspacing="0" class="table text-uppercase">
                        <tbody>
                        <!-- 小计 -->
                        <tr class="subtotal pt-2 pb-2 border-top border-bottom">
                            <th>小计</th>
                            <td data-title="Subtotal">
                                <span class="price-amount amount text-primary ps-5">
                                    <bdi>
                                        <span class="price-currency-symbol">￥</span>${cartSubtotal}
                                    </bdi>
                                </span>
                            </td>
                        </tr>
                        <!-- 总计 -->
                        <tr class="order-total pt-2 pb-2 border-bottom">
                            <th>总计</th>
                            <td data-title="Total">
                                <span class="price-amount amount text-primary ps-5">
                                    <bdi>
                                        <span class="price-currency-symbol">￥</span>${cartTotal}
                                    </bdi>
                                </span>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <!-- 按钮 -->
                <div class="button-wrap">
                    <button class="btn btn-black btn-medium text-uppercase me-2 mb-3 btn-rounded-none">更新购物车</button>
                    <button class="btn btn-black btn-medium text-uppercase me-2 mb-3 btn-rounded-none">继续购物</button>
                    <button id="SetOrder" class="btn btn-black btn-medium text-uppercase mb-3 btn-rounded-none">去下单</button>

                </div>
            </div>
        </div>
    </div>
</section>










<jsp:include page="footer.jsp"/>
<!-- 结束底部底部部分 -->


<script src="js/jquery-1.11.0.min.js"></script>

<script src="https://cdn.bootcdn.net/ajax/libs/Swiper/11.0.5/swiper-bundle.min.js"></script>

<script type="text/javascript" src="js/bootstrap.bundle.min.js"></script>

<script type="text/javascript" src="js/plugins.js"></script>

<script type="text/javascript" src="js/script.js"></script>

<script src="vendor/glightbox/js/glightbox.min.js"></script>

<script src="vendor/nouislider/nouislider.min.js"></script>

<script src="vendor/swiper/swiper-bundle.min.js"></script>

<script src="vendor/choices.js/public/assets/scripts/choices.min.js"></script>

<script src="js/front.js"></script>

</body>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        var payButton = document.getElementById("SetOrder");

        payButton.addEventListener("click", function() {
            // 替换成你的Servlet URL
            var servletUrl = "${pageContext.request.contextPath}/Front/SetOrder.jsp";
            window.location.href = servletUrl;
        });
    });
</script>


</html>